<template>
  <el-dialog v-model="visible"
             title="运输订单详情"
             @close="handleClose"
             :before-close="handleBeforeClose"
             width="60%"
             :modal="true"
             custom-class="dialog-with-scroll">

    <el-form :model="order" label-width="120px" class="demo-form">
      <el-form-item label="运输订单号">
        <span>{{ order.trackingNumber }}</span>
      </el-form-item>
      <el-form-item label="物流商ID">
        <span>{{ order.logisticId }}</span>
      </el-form-item>
      <el-form-item label="出发地">
        <span>{{ order.origin }}</span>
      </el-form-item>
      <el-form-item label="目的地">
        <span>{{ order.destination }}</span>
      </el-form-item>
      <el-form-item label="仓库">
        <span>{{ order.warehouseNo }}</span>
      </el-form-item>
      <el-form-item label="总重量">
        <span>{{ order.weight }} {{ order.weightUnit }}</span>
      </el-form-item>
      <el-form-item label="运输件数">
        <span>{{ order.transportQuantity}}</span>
      </el-form-item>
      <el-form-item label="调拨日期">
        <span>{{ formatDate(order.departDate) }}</span>
      </el-form-item>
      <el-form-item label="预计到达日期">
        <span>{{ formatDate(order.departureDate) }}</span>
      </el-form-item>
      <el-form-item label="状态">
        <span>
          {{
            order.state === '待分配物流商' ? '待分配物流商' :
                order.state === '待物流商确认' ? '待物流商确认' :
                    order.state === '待确认' ? '待确认' :
                        order.state === '待配送' ? '待配送' :
                            order.state === '运输中' ? '运输中' :
                                '已送达'
          }}
  </span>
      </el-form-item>
      <el-form-item label="运费">
        <span>{{ order.logisticsFee}}</span>
      </el-form-item>
      <el-form-item label="生成时间">
        <span>{{ formatDate(order.generatedDate)}}</span>
      </el-form-item>
      <el-form-item label="最后修改时间">
        <span>{{ formatDate(order.updatedDate) }}</span>
      </el-form-item>
      <el-form-item label="修改人">
        <span>{{ order.updatedPerson ? order.updatedPerson : '无' }}</span>
      </el-form-item>
      <el-form-item label="备注">
        <span>{{ order.remarks ? order.remarks : '无' }}</span>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { ref, defineComponent, watch } from 'vue';

export default defineComponent({
  name: 'OperatorTransportShowDialogComponent',
  props: {
    modelValue: {
      type: Boolean,
      required: true
    },
    order: {
      type: Object,
      required: true
    }
  },
  setup(props, { emit }) {
    const visible = ref(props.modelValue);
    const formatDate = (value) => {
      if (!value) return '';
      const date = new Date(value);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    const handleClose = () => {
      emit('update:modelValue', false);
    };
    const handleBeforeClose = (done) => {
      emit('update:modelValue', false); // 关闭时触发更新父组件的状态
      done();
    };

    watch(() => props.modelValue, (newVal) => {
      visible.value = newVal;
    });

    return {
      formatDate,
      handleClose,
      handleBeforeClose,
      visible
    };
  }
});
</script>

<style scoped>
.demo-form {
  display: flex;
  flex-wrap: wrap;
}

.demo-form .el-form-item {
  width: 50%;
  box-sizing: border-box;
}

.demo-form .el-form-item:nth-child(odd) {
  padding-right: 10px;
}

.demo-form .el-form-item:nth-child(even) {
  padding-left: 10px;
}
</style>